<template>
    <div class="step_main">
        <button class="step_min" @click="min"></button>
        <span>{{val}}</span>
        <button class="step_plus" @click="plus"></button>
    </div>
</template>
<style lang="less" scoped>
.step_main{
    width: 60px;
    height: 20px;
    border: 1px solid #ccc;
    display: flex;

    button{
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
        background-color: #fff;
        width: 18px;
        height: 18px;
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 8px;
    }
    .step_min{
        background-image: url('../assets/img/nummin.png');
    }
    .step_plus{
        background-image: url('../assets/img/numplus.png');
    }
    span{
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-family: "DINPro-Bold";
        font-size: 12px;
        color: #000;
        text-align: center;
    }
}
</style>
<script>
export default {
    props:['val','cartId'],
    methods:{
        min(){
            if(this.val>1){
                // this.val--
                this.$emit("stepperMin",this.cartId,this.val)
            }
        },
        plus(){
            // this.val++
            this.$emit("stepperMax",this.cartId,this.val)
        }
    }
}
</script>